<template>
  <div class="resultOrScore">
    <NewCard :title="`${selectRadioList.roleName}学习-${selectStudyItem.examName}`" :isright="true">
        <!-- 证书按钮 -->
        <template slot="right">
            <p class="certP" v-if="'score' in selectStudyItem" @click="certShowDrawer=true">
                <svg-icon icon-class="zhengshu_icon"/>
                查看证书
            </p>
        </template>

        <!-- 证书抽屉 -->
        <el-drawer
            :title="`${selectStudyItem.examName}证书`"
            size="40%"
            :visible.sync="certShowDrawer">
            <CertDrawer :selectStudyItem="selectStudyItem" :selectRadioList="selectRadioList"></CertDrawer>
        </el-drawer>

        <!-- 得分 不及格要加一个类目isNoPass -->
        <div class="score-box" :class="selectStudyItem.score&&Number(selectStudyItem.score)<60?'isNoPass':''">
            <div class="score-num">
                <svg-icon icon-class="wtg_img" class="tgIcon" v-if="selectStudyItem.status == '-1'"/>
                <svg-icon icon-class="tg_img" class="tgIcon" v-else/>
                <p>得分</p>
                <h3 :class="getScoreState()">{{'score' in selectStudyItem ? selectStudyItem.score :'--'}}</h3>
            </div>
            <div class="score-hint">
                <h3>{{getScoreHint()}}</h3>
                <p>
                    <span>总题数：{{selectStudyItem.questionNum}}题</span>
                    <span>答对：{{selectStudyItem.quesYes ? selectStudyItem.quesYes:0}}题</span>
                    <span>总分：100分</span>
                    <span>及格：{{(selectStudyItem.pass / 100)*100}}分</span>
                </p>
                <div class="score-remind" :class="getScoreState()">
                    <p>{{getScoreRemind()}}</p>
                    <el-button round v-if="getScoreRBtn()" @click="clickStart()" :disabled="!selectStudyItem.questionNum">{{getStudyingBtnTxt()}}</el-button>
                </div>
            </div>
        </div>

        <!-- 试题解析 -->
        <div class="analysis-box">
            <p class="analysis-title">—— 试题解析 ——</p>
            
            <!-- 试题解析列表 -->
            <div class="analyList" v-if="getAnalyShow()">
                <el-collapse v-model="activeName">
                    <el-collapse-item :name="index" v-for="(qa,index) in qaAnalyList" :key="index">
                        <template slot="title">
                            <div class="coll-title">
                                <i :class="qa.result=='1'?'isOk':''"></i>
                                <p>{{qa.question}}</p>
                            </div>
                        </template>
                        <!-- 答案列表 -->
                        <ul>
                            <li v-for="(item,key,i) in qa.options" :key="key">{{getKeyEn((i+1).toString())}}、{{item}}</li>
                        </ul>
                        <!-- 正确答案 -->
                        <p class="rightAnswers" v-if="myAnswerList.userAnswerArr[index]">
                            正确答案：<span class="correct">{{sortKeyEn(myAnswerList.correctAnswerArr[index])}}</span> 
                            您的答案：<span class="errorA" :class="qa.result=='1'?'correct':''">{{sortKeyEn(myAnswerList.userAnswerArr[index])}}</span></p>
                        <p class="rightAnswers" v-else>您未作答该题</p>
                        <!-- 试题解析 -->
                        <div class="analysis-box">
                            参考解析： {{qa.analysis}}
                        </div>
                    </el-collapse-item>
                </el-collapse>
            </div>
            
            <!-- 空状态 -->
            <div class="analysis-empty" v-else>
                <img src="~@/assets/images/wjg_img@2x.png" alt="">
                <p v-if="selectStudyItem.changed=='1' && selectStudyItem.status=='2'">该模块有题目新增，您可再次学习</p>
                <p v-else>暂无内容</p>
            </div>
        </div>
    </NewCard>
  </div>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import CertDrawer from "./certDrawer.vue"
//防抖：debounce 用户触发事件过于频繁，只要最后一次事件的操作
import debounce from "lodash/debounce";

import {getQuestionListApi,getExamResultGetInfoApi} from "@/BMViews/api/assess/question.js"
export default {
    name: 'resultOrScore',
    components:{NewCard,CertDrawer},
    props:{
        // 选择的一个科目
        selectStudyItem:{
            type: Object,
        },
        // 选择的一个角色
        selectRadioList:{
            type: Object,
        },
    },
    data(){
        return{
            certShowDrawer: false,//证书抽屉打开关闭

            activeName: [0],//展开的
            // 试题解析列表
            qaAnalyList: [],
            // 我的回答列表
            myAnswerList: [],
        }
    },
    mounted(){
        // this.getQuestionList() //获取所有题目的解析
        this.getExamResultGetInfo() //获取我的回答列表
    },
    watch:{
        selectStudyItem(newVal,oldVal){
            // this.getQuestionList() //获取所有题目的解析
            this.getExamResultGetInfo() //获取我的回答列表
        }
    },
    methods:{
        // 获取当前选择科目的标题
        getScoreHint(){
            // 状态 1通过 -1未通过 0未开始 2继续学习
            let study = this.selectStudyItem
            const stateMap = {
                '-1': `很抱歉，您未通过【${study.examName}】的考核`,
                0: "您还未开始学习哦～",
                1: `恭喜您，已通过【${study.examName}】的考核`,
                2: `恭喜您，已通过【${study.examName}】的考核`,
            };
            return stateMap[study.status];
        },

        // 获取当前选择科目的提示语
        getScoreRemind(){
            // 状态 1通过 -1未通过 0未开始 2继续学习
            let study = this.selectStudyItem
            const stateMap = {
                '-1': `您未能通过考核，需要通过考核才能获得问金奖励哦～`,
                0: "完成学习，且通过后可获得问金奖励哦～",
                1: `您的考试结果还不错，已经通过考核，获得${study.giveVoucher}问金`,
                2: `该模块有题目新增，您可再次学习，学习通过后可继续获得问金哦～`,
            };
            return stateMap[study.status];
        },

        // 获取提示语后面的按钮的显示隐藏
        getScoreRBtn(){
            // 状态 1通过 -1未通过 0未开始 2继续学习
            let study = this.selectStudyItem
            const stateMap = {
                '-1': true, //不通过和还没开始学习要显示
                0: true, //不通过和还没开始学习要显示
                1: false, //通过后不用显示
                2: true,//题目有新增要显示
            };
            return stateMap[study.status];
        },

        // 获取当前分数下的状态颜色类名
        getScoreState(){
            let score = this.selectStudyItem.score
            let jg = (this.selectStudyItem.pass / 100)*100
            if(score<jg){
                return 'failScore'
            }
        },

        // 不通过的或者题目有新增或者还没做过的的显示按钮
        getStudyingBtnTxt(){
            // 状态 1通过 -1未通过 0未开始 2继续学习
            let study = this.selectStudyItem
            const stateMap = {
                '-1': "重新学习",
                0: "开始学习",
                2: "再次学习",
            };
            return stateMap[study.status];
        },

        // 判断试题解析是否显示
        getAnalyShow(){
            // 判断成绩这个字段是否存在
            if('score' in this.selectStudyItem){
                if(this.selectStudyItem.changed=='1' && this.selectStudyItem.status=='2'){
                    // 代表有题目新增 也要隐藏试题解析
                    return false
                }else{
                    return true
                }
            }else{
                return false
            }
        },

        // 获取所有题目的解析
        async getQuestionList(){
            let examId = this.selectStudyItem.examId
            let result = await getQuestionListApi({examId})
            if(result.code==200){
                this.qaAnalyList = result.rows
            }
        },

        // 获取我的回答
        async getExamResultGetInfo(){
            // 状态是未开始 不发请求
            if(this.selectStudyItem.status == '0' || this.selectStudyItem.status == '2') return

            let id = this.selectStudyItem.id
            let result = await getExamResultGetInfoApi({id})
            if(result.code==200){
                this.qaAnalyList = result.data.questions //所有的题目
                this.myAnswerList = result.data
                // 我的回答
                let userAnswerArr = result.data.userAnswer.split(',')
                this.$set(this.myAnswerList,'userAnswerArr',userAnswerArr)
                // 正确答案
                let correctAnswerArr = result.data.correctAnswer.split(',')
                this.$set(this.myAnswerList,'correctAnswerArr',correctAnswerArr)
            }
        },

        // 把数字转成英文字母
        getKeyEn(key){
            if(!key) return
            let arr = key.split(',')
            let newArr = arr.sort((a, b) => Number(a)- Number(b))
            let alphabet = ''
            newArr.forEach(item => {
                alphabet = alphabet + String.fromCharCode(64 + parseInt(item));
            });
            return alphabet
        },

        // 给字母排序
        sortKeyEn(answer){
            let arr = answer.split('')
            let newArr = arr.sort()
            return newArr.join('')
        },

        // 获取我的答案
        getMyAnswer(qa){
            let id = qa.id
            // 过滤出当前这题的我的回答
            let obj = ''
            for (let key in this.myAnswerList.qa) {
                if(key == id){
                    obj = this.myAnswerList.qa[key]
                }
            }
            return this.getKeyEn(obj)
        },
        
        // 判断正确答案是否要显示
        getMyAnswerShow(qa){
            let id = qa.id
            let answer = qa.answerStringArray
            // 过滤出当前这题的我的回答
            let obj = ''
            for (let key in this.myAnswerList.qa) {
                if(key == id){
                    obj = this.myAnswerList.qa[key]
                }
            }
            // 判断答案是否正确
            let a = answer.split(',')
            let b = obj.split(',')
            // return this.isArrayEqual(a,b)
            return b[b.length-1]
        },

        // 判断是否答对问题
        isGotIt(qa){
            let isPass = false
            let answerArr = qa.answerStringArray.split(',')
            let obj = ''
            for (let key in this.myAnswerList.qa) {
                if(key == qa.id){
                    obj = this.myAnswerList.qa[key]
                }
            }
            let myAnswerArr = obj.split(',')
            // console.log(qa.question,answerArr,myAnswerArr,this.isArrayEqual(answerArr,myAnswerArr));
            return this.isArrayEqual(answerArr,myAnswerArr)
        },

        // js判断两个数组是否有相同的元素的方法（不限顺序）
        isArrayEqual (arr1, arr2) {
            const a1 = arr1.map((i) => i)
            let a2 = arr2.map((i) => i)
            let tempArr = []
            if (a1.length !== a2.length) {
                return false
            } else {
                for (let i = 0; i < a1.length; i++) {
                if (a2.indexOf(a1[i]) !== -1) {
                    a2.splice(a2.indexOf(a1[i]), 1)
                    tempArr.push(a1[i])
                } else {
                    tempArr = []
                    break
                }
                }
                return tempArr.length === arr2.length
            }
        },

        // 点击开始学习、重新学习、再次学习
        clickStart: debounce(function(){
            this.$bus.$emit('clickStartBus',this.selectStudyItem)
        },500),
    },
}
</script>

<style scoped>
ul,p,h3,h4 {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 抽屉样式 */
::v-deep .el-drawer__header{
    border-bottom: 1px solid #EFEFEF;
    padding-bottom: 15px;
    margin-bottom: 20px;
}
::v-deep .el-drawer__header>span{
    font-size: 18px;
    color: #2E3F5E;
    padding-left: 20px;
    background: url('~@/wss/assets/image/icon/cardLeft.png') left center no-repeat;
    background-size: 7px;
}

/* 折叠面板 */
.analyList .el-collapse{
    border-top: 0;
}
::v-deep .analyList .el-collapse .el-collapse-item__header{
    height: auto;
    padding: 10px 0;
}
.el-collapse .coll-title {
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    color: #333;
}
.el-collapse .coll-title i{
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #EB564E;
    margin-right: 10px;
    margin-top: 5px;
}
.el-collapse .coll-title i.isOk{
    background-color: #4ABD62;
}
.el-collapse .coll-title p{
    width: calc(100% - 18px);
    line-height: 24px;
}

.el-collapse ul{
    padding-left: 20px;
}
.el-collapse ul>li{
    font-size: 14px;
    color: #999999;
    line-height: 34px;
}
.el-collapse .rightAnswers{
    background-color: #F6F7FA;
    padding: 6px 20px;
    font-size: 12px;
    color: #333333;
    margin: 10px 0;
}
.el-collapse .rightAnswers>span{
    margin-right: 20px;
}
.el-collapse .rightAnswers>span.errorA{
    color: #EB564E;
}
.el-collapse .rightAnswers>span.correct{
    color: #4ABD62;
}

.el-collapse .analysis-box{
    border: 1px solid #ECEDF0;
    padding: 15px 20px;
    font-size: 14px;
    color: #666666;
    line-height: 28px;
    margin-bottom: 20px;
}

::v-deep .analyList .el-collapse .el-collapse-item__content {
    padding-bottom: 0;
}
::v-deep .analyList .el-collapse .el-icon-arrow-right:before {
    content: "\E790";
}
::v-deep .analyList .el-collapse .el-collapse-item__arrow.is-active {
    transform: rotate(180deg);
}
</style>

<style lang="scss" scoped>
// 查看证书按钮
.certP{
    font-size: 14px;
    color: #39486F;
    cursor: pointer;
    svg{
        font-size: 16px;
    }
}

// 得分
.score-box{
    display: flex;
    align-items: center;
    margin-top: 30px;
    border-bottom: 1px solid #EFEFEF;
    margin-bottom: 30px;
    padding-bottom: 30px;
    // 左边
    .score-num{
        position: relative;
        width: 20%;
        text-align: center;
        svg{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            font-size: 120px;
        }
        p{
            font-size: 14px;
            color: #999999;
        }
        h3{
            font-size: 40px;
            color: #F87A23;
        }
        .failScore{
            color: #6A779F;
        }
        
    }
    // 右边
    .score-hint{
        width: 80%;
        h3{
            font-size: 18px;
            color: #333333;
            border-bottom: 1px solid #EFEFEF;
            padding-bottom: 10px;
            margin-bottom: 10px;
        }
        p{
            font-size: 14px;
            color: #666666;
            margin-bottom: 15px;
            span{
                margin-right: 20px;
            }
        }
        .score-remind{
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 5px 10px;
            background: #FDF7E7;
            border-radius: 4px;
            border: 1px solid #F9E9CA;
            p{
                color: #D09E74;
                margin: 0;
            }
            .el-button{
                font-size: 12px;
                padding: 6px 10px;
                border-color: #F87A23;
                background-color: #F87A23;
                color: #fff;
            }
        }
        .failScore{
            background-color: #F3F6FC;
            border: 1px solid #E0E8F7;
            p{
                color: #7F8AA0;
            }
            .el-button{
                border-color: #6A779F;
                background-color: #6A779F;
            }
        }
    }
}
// 不通过的状态
.isNoPass{
    .score-num{
        h3{
            color: #6A779F;
        }
    }
    .score-hint{
        .score-remind{
            background: #F3F6FC;
            border: 1px solid #E0E8F7;
            p{
                color: #7F8AA0;
            }
            .el-button{
                border-color: #6A779F;
                background-color: #6A779F;
            }
        }
    }
}

// 试题解析
.analysis-box{
    .analysis-title{
        font-size: 16px;
        color: #999999;
        text-align: center;
        margin-bottom: 30px;
    }
    .analysis-empty{
        text-align: center;
        font-size: 14px;
        color: #9B9B9B;
        margin-top: 30px;
        img{
            width: 28%;
        }
    }
}
</style>